<!--
 * @Author: your name
 * @Date: 2021-11-20 00:11:16
 * @LastEditTime: 2021-11-20 00:14:01
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jf-nlitc\src\views\Home\swyzt\swjc\sk\index.vue
-->
<template>
    <!-- 水库 -->
    <div class="top">
        <div class="raining">
            <p>河道</p>
        </div>

        <div id="tabbox">
            <!--点击设置msg的值  如果msg等于0，第一个a添加cur类名，如果msg等于1，第二个a添加cur类名，以此类推。
            添加了cur类名，a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式-->
            <div class="tab-tit">
                <a href="javascript:;" @click="msg=0" :class="{'cur':msg===0}">赤石河</a>
                <a href="javascript:;" @click="msg=1" :class="{'cur':msg===1}">明热河</a>
                <a href="javascript:;" @click="msg=2" :class="{'cur':msg===2}">南门河</a>
                <!-- <a href="javascript:;" @click="msg=3" :class="{'cur':msg===3}">vue</a> -->
            </div>
            <div class="tab-con">
                <div v-show="msg===0">
                    <div class="wrap">
                        <div class="item">
                            <img src="../../../../../../../src/assets/images/weather/Frame-1.png" alt="">
                            <div class="item-right">
                                <div style="font-size:24px">382.1</div>
                                <div style="font-size:14.4px;margin-top:5px;width:200px">流域面积（km²）</div>
                            </div>
                        </div>
                        <div class="item">
                            <img src="../../../../../../../src/assets/images/weather/Frame.png" alt="">
                            <div class="item-right">
                                <div style="font-size:24px">36.75</div>
                                <div style="font-size:14.4px;margin-top:5px;width:200px">河流长度（m）</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-show="msg===1">
                    <div class="wrap">
                        <div class="item">
                            <img src="../../../../../../../src/assets/images/weather/Frame-1.png" alt="">
                            <div class="item-right">
                                <div style="font-size:24px">106.8</div>
                                <div style="font-size:14.4px;margin-top:5px;width:200px">流域面积（km²）</div>
                            </div>
                        </div>
                        <div class="item">
                            <img src="../../../../../../../src/assets/images/weather/Frame.png" alt="">
                            <div class="item-right">
                                <div style="font-size:24px">22.64</div>
                                <div style="font-size:14.4px;margin-top:5px;width:200px">河流长度（m）</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-show="msg===2">
                    <div class="wrap">
                        <div class="item">
                            <img src="../../../../../../../src/assets/images/weather/Frame-1.png" alt="">
                            <div class="item-right">
                                <div style="font-size:24px">69.8</div>
                                <div style="font-size:14.4px;margin-top:5px;width:200px">流域面积（km²）</div>
                            </div>
                        </div>
                        <div class="item">
                            <img src="../../../../../../../src/assets/images/weather/Frame.png" alt="">
                            <div class="item-right">
                                <div style="font-size:24px">15.95</div>
                                <div style="font-size:14.4px;margin-top:5px;width:200px">河流长度（m）</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- <div class="box_blocks">
            <div v-for="(item, index) in boxBlockData" :key="index" class="box_block" @click="box_blockClick(item)" :style="{
              'background':
                boxBlockActive === item.name
                  ? 'url(../../../../../src/assets/images/home/Rectangle 46.png)'
                  : '',
            }">
                <div class="box_blockwrap">
                    <div class="tit">
                        <p :style="{
                    color: boxBlockActive === item.name ? '#fff' : '#ffffff8f',
                  }">
                            {{ item.name }}
                        </p>
                    </div>

                </div>
            </div>
        </div>

        <div class="wrap" v-show="isshow">
            <div class="item">
                <img src="../../../../../../../src/assets/images/weather/Frame-1.png" alt="">
                <div class="item-right">
                    <div style="font-size:24px">382.1</div>
                    <div style="font-size:14.4px;margin-top:5px;width:200px">流域面积（km²）</div>
                </div>
            </div>
            <div class="item">
                <img src="../../../../../../../src/assets/images/weather/Frame.png" alt="">
                <div class="item-right">
                    <div style="font-size:24px">36.75</div>
                    <div style="font-size:14.4px;margin-top:5px;width:200px">河流长度（m）</div>
                </div>
            </div>
        </div>
        <div class="wrap" v-show="!isshow">
            <div class="item">
                <img src="../../../../../../../src/assets/images/weather/Frame-1.png" alt="">
                <div class="item-right">
                    <div style="font-size:24px">106.8</div>
                    <div style="font-size:14.4px;margin-top:5px;width:200px">流域面积（km²）</div>
                </div>
            </div>
            <div class="item">
                <img src="../../../../../../../src/assets/images/weather/Frame.png" alt="">
                <div class="item-right">
                    <div style="font-size:24px">22.64</div>
                    <div style="font-size:14.4px;margin-top:5px;width:200px">河流长度（m）</div>
                </div>
            </div>
        </div>
        <div class="wrap" v-show="!isshow">
            <div class="item">
                <img src="../../../../../../../src/assets/images/weather/Frame-1.png" alt="">
                <div class="item-right">
                    <div style="font-size:24px">69.8</div>
                    <div style="font-size:14.4px;margin-top:5px;width:200px">流域面积（km²）</div>
                </div>
            </div>
            <div class="item">
                <img src="../../../../../../../src/assets/images/weather/Frame.png" alt="">
                <div class="item-right">
                    <div style="font-size:24px">15.95</div>
                    <div style="font-size:14.4px;margin-top:5px;width:200px">河流长度（m）</div>
                </div>
            </div>
        </div> -->
        <div class="areazo">
            <div class="aerlength" v-for="item in data" :key="index">
                <span>{{item.length}}</span>
                <span>{{item.number}}</span>
            </div>

        </div>

        <div class="tuiao">
            <div id="bdlocfdkchart" style="width:500px;height:150px; margin-left: 0px"></div>
        </div>

        <div class="tubiao">
            <div id="bdlocdkchart" style="width:460px;height:170px; margin-left: 20px"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {
            msg: 0,
            // isshow: true,
            // isshow1: false,
            // isshow2: false,
            boxBlockActive: '赤石河',
            boxBlockData: [
                {
                    name: '赤石河',
                },
                {
                    name: '明热河',
                },
                {
                    name: '南门河',
                },
            ],

            data: [
                {
                    length: '总流域面积',
                    number: '879.05(km²)',
                },
                {
                    length: '河流总河长',
                    number: '283.33m',
                },
                {
                    length: '供水量',
                    number: '7500m³',
                },
            ],

            options: {
                legend: {
                    top: '15',
                    orient: 'vertical',
                    left: 'left',
                    left: '280',
                    itemGap: 15, // 图例每项之间的间隔。
                    // padding:[10,10,10,10],
                    itemHeight: 7, //修改icon图形大小
                    itemWidth: 7, //修改icon图形大小
                    icon: 'circle',
                    formatter: function (name) {
                        var index = 0
                        var labels = ['干流', '一级支流', '二级直流', '三、四级直流']
                        var counts = [1050, 500, 380, 420]
                        labels.forEach(function (value, i) {
                            if (value == name) {
                                index = i
                            }
                        })
                        return name + '        ' + counts[index]
                    },
                    textStyle: {
                        //图例文字的样式
                        color: 'rgba(255,255,255,0.8)',
                        fontSize: 15,
                    },
                },
                tooltip: {
                    show: true,
                    // formatter: function (params, value) {
                    //     return params.name + ':' + params.value
                    // },
                    textStyle: {
                        fontSize: 17,
                    },
                },
                toolbox: {
                    show: false,
                },
                series: [
                    {
                        name: '河流数量',
                        type: 'pie',
                        radius: [60, 50],
                        center: ['30%', '50%'],
                        // roseType: 'area',
                        itemStyle: {
                            borderRadius: 1,
                        },
                        // emphasis: {
                        //     show: false,
                        //     textStyle: {
                        //         fontSize: '15',
                        //         fontWeight: 'bold',
                        //     },
                        // },
                        data: [
                            { value: 9, name: '  干流' },
                            { value: 22, name: '一级支流' },
                            { value: 15, name: '二级直流' },
                            { value: 6, name: '三、四级直流' },
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 110,
                                shadowOffsetX: 20,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                        emphasis: {
                            scaleSize: 20,
                        },
                        label: {
                            //去除饼图的指示折线label
                            normal: {
                                show: false,
                                position: 'inside',
                                formatter: '{b}:{d}%',
                            },
                        },
                    },
                ],
            },

            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                },
                legend: {
                    show: false,
                },
                grid: {
                    top: '20%',
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            show: false, // 是否显示坐标轴刻度
                        },
                        axisLabel: {
                            inside: false,
                            textStyle: {
                                color: 'rgba(255,255,255,.7)',
                                fontSize: '10',
                                itemSize: '',
                            },
                        },

                        data: ['水质等级警戒', '超雨量等级警戒', '防洪水位等级'],
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        interval: 50,
                        axisLabel: {
                            inside: false,
                            textStyle: {
                                color: 'rgba(255,255,255,.7)',
                                fontSize: '10',
                                itemSize: '',
                            },
                        },
                        splitLine: {
                            show: true, //y网格线
                            lineStyle: {
                                color: 'rgba(255,255,255,.2)',
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '正常',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: 30, //柱图宽度
                        emphasis: {
                            focus: 'series',
                        },
                        data: [0, 10, 18],
                    },

                    {
                        name: '超警戒',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series',
                        },
                        data: [40, 0, 0],
                    },
                ],
            },
        }
    },
    computed: {},
    watch: {},
    methods: {
        box_blockClick(val) {
          
            this.boxBlockActive = val.name
        },
        qbox_blockClick(val) {
            this.qboxBlockActive = val.name
        },
        showschart() {
            let myChart = echarts.init(document.getElementById('bdlocfdkchart'))
            myChart.setOption(this.options)
        },

        showchart() {
            let myChart = echarts.init(document.getElementById('bdlocdkchart'))
            myChart.setOption(this.option)
        },
    },
    created() {},
    mounted() {
        this.showchart()
        this.showschart()
    },
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    components: {},
}
</script>

<style lang="scss" scoped>
.top {
    width: 100%;
    height: 610px;
    // border: 1px solid red;
    .raining {
        width: 100%;
        height: 25px;
        // border: 1px solid red;
        background: url('../../../../../../../src/assets/images/home/top.png') no-repeat center;
        background-size: 99% 100%;
        p {
            margin-left: 15px;
            font-family: OPPOSans;
            font-size: 18px;
        }
    }
    #tabbox {
        width: 600px;
        // margin: 0 auto;
        .tab-tit {
            font-size: 0;
            width: 600px;
        }
        .tab-tit a {
            display: inline-block;
            height: 40px;
            line-height: 40px;
            width: 20%;
            font-size: 18px;
            text-align: center;
            // background: #ccc;
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
        }
        .tab-tit .cur {
            cursor: pointer;
            background: url('../../../../../../../src/assets/images/home/Rectangle 46.png') no-repeat bottom;
            color: #fff;
        }
       
    }
    .box_blocks {
        margin: 10px 0;
        width: 70%;
        height: 30px;
        // border: 1px solid red;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .box_block {
            width: 104px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            // background: ;
            mix-blend-mode: normal;
            // opacity: 0.6;
            border-radius: 4px;
            .box_blockwrap {
                cursor: pointer;
                background: url('../../../../../../../src/assets/images/home/Rectangle 46.png') no-repeat bottom;
                background-position: 20px 20px;
                //   border: 1px solid red;

                width: 104px;
                height: 30px;
                overflow: hidden;
            }
        }
    }

    .wrap {
        display: flex;
        padding: 10px;
        justify-content: space-around;
    }
    .item {
        background-image: url('../../../../../../../src/assets/images/weather/矩形.png');
        // width: 100%;
        // height: 27px;
        background-size: 100% 100%;
        display: flex;
        height: 90px;
        width: 45%;
        padding: 23px;

        .item-right {
            margin-left: 10px;
        }
        // background-color: pink;
        img {
            width: 48px;
            height: 48px;
        }
    }
    .areazo {
        width: 100%;
        height: 120px;
        // border: 1px solid red;

        .aerlength {
            width: 89%;
            height: 30px;
            // border: 1px solid red;
            margin: 0px 0 10px 30px;
            // margin-top: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            line-height: 25px;
            justify-content: space-between;
            span:nth-child(2) {
                font-size: 18px;
            }
        }
    }
}
</style>
